<template>
 <div>
 <!-- 面包导航-->
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>题目管理</el-breadcrumb-item>
  <el-breadcrumb-item>题目可视化</el-breadcrumb-item>
  
</el-breadcrumb>
<!--声明一个卡片-->

<el-card>
<div id="main1" style="width: 600px;height:400px;">

</div>

</el-card>



 </div>
</template>

<script>
//对外暴露接口
//导入

import * as echarts from 'echarts'
 export default {
name:'ExamListReport', 
   data () {
     return {
        
         
         

     }
   },
   created() {
        
   },
   mounted() {
       //应先去后端获取数据
       this.GetExamListEchart();
       //this.DrawExamlistByDate(1)

      

       

   },
   methods: {
       //绘制图标
       DrawExamlistByDate(dbdata){
           var Option = {
             backgroundColor: '#2c343c',
             title: {
                text: '题目难度分布',
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },

            tooltip: {
                trigger: 'item'
            },
/*
    visualMap: {
        show: false,
        min: 0,
        max: 10000,
        inRange: {
            colorLightness: [0, 0.5],

        },
        color:['rgb(150,220,230)']
    },*/
    series: [
        {
            name: '题目难度',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: dbdata.sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                color: 'rgba(255, 255, 255, 0.3)'
            },
            labelLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            itemStyle: {
                //color: '#c23531',
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
           
        }
           
              // 基于准备好的dom，初始化echarts实例

                var myChart1 = echarts.init(document.getElementById('main1'));                
              // 绘制图表

                myChart1.setOption(Option);
           },
        GetExamListEchart(){
            let url = "api/GetExamListEchart";
            let that = this
            let data ={

            }
        this.$axios.post(url,
                      this.$qs.stringify(data), 
                      ).then(function(Response) {
        console.log(Response.data);
        let code = Response.data.code
        if ((code = 200)) {
         
         
          
          that.DrawExamlistByDate(Response.data.data)
          
        } else {
          that.$message.error(message);
        }
      });


        }


       },
   components: {

   },
 }
</script>

<style scoped>
.el-card{
    float:left;
}

 
</style>
